<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>BootStrap实战</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--页面的导航-->
		<div class="side-nav slide" role="navigation">
			<ul class="nav-side-nav">
				<li><a class="tooltip-side-nav" href="#onepage"  ></a></li>
				<li><a class="tooltip-side-nav" href="#twopage"  ></a></li>
				<li><a class="tooltip-side-nav" href="#threepage"></a></li>
				<li><a class="tooltip-side-nav" href="#fourpage" ></a></li>
				<li><a class="tooltip-side-nav" href="#fivepage" ></a></li>
			</ul>
		</div>
		
		<!--第一屏-->
		<div class="ondepage" id="onepage">
			<!--背景-->
			<div class="ondepage-bg" id="onepagebg">
				<!--里面的内容-->
				<div class="container">
					<!--开始使用栅格系统了-->
					<div class="row">
						<!--方便后面覆盖一些样式-->
						<div class="title-text"> <!--专门调试头部字体-->
							<div class="col-md-12 headfontsize">
								<h1 class="headh1content">
									德玛西亚<br />生命不息，<br/>战斗不止！
								</h1>
								<p style="margin-top: 50px; line-height: 33px;">
									只要你坚持不懈，相信梦想对你而言，小菜一碟，你一定是可以顺利拿下的。<br />
									只要你坚持不懈，相信梦想对你而言，小菜一碟，</p>
								<!--这下面还有个按钮-->
								<p  class="btn-app-store">
									<a href="#" class="btn btn-success btn-lg">
										制定目标，开始学习
									</a>
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	
		<!--第二屏-->
		<div class="twopage" id="twopage">
			<!--文字-->
			<div class="twopage-text">
				<h1 class="twopage-text-h1">
					选择你的第一个目标开始战斗<img  src="img/bg/beijing11_caijian.jpg"/>
				</h1>
			</div>
			<!--左中右3个正方形-->
			<div class="row">
				<div class="twopage-courses col-md-4">
					<a href="#">
						<img src="img/touxiang/touxiang1.jpg" style="width: 100%;" />
						<!--图片的介绍-->
						<div class="classicon">
							<h3>风云榜人物</h3>
							<h1><strong>我就想问还有谁</strong></h1>
						</div>
					</a>
				</div>
				<div class="twopage-courses col-md-4">
					<a href="#">
						<img src="img/touxiang/touxiang2.jpg" style="width: 100%;" />
						<!--图片的介绍-->
						<div class="classicon">
							<h3>风云榜人物</h3>
							<h1><strong>我就想问还有谁</strong></h1>
						</div>
					</a>
				</div>
				<div class="twopage-courses col-md-4">
					<a href="#">
						<img src="img/touxiang/touxiang3.jpg" style="width: 100%;" />
						<!--图片的介绍-->
						<div class="classicon">
							<h3>风云榜人物</h3>
							<h1><strong>我就想问还有谁</strong></h1>
						</div>
					</a>
				</div>
			</div>
			
			<!--第二页的按钮-->
			<div class="twopagebtn">
				<a id="twopage-easy" href="#" class="btn  btn-success btn-lg ">
					如果你想成为强者，快快点击这里
				</a>
			</div>
			
		</div>
		
		<!--第三屏-->
		<div class="threepage" id="threepage">
			<!--背景图片-->
			<div class="threepage-bg" id="threepagebg">
				<!--具体内容-->
				<div class="threepagecontent">
					<div class="threepagetext">
						<h1>为什么要学习编程思想</h1>
						<p>
										只要你坚持不懈，相信梦想对你而言，小菜一碟，你一定是可以顺利拿下的。<br />
										只要你坚持不懈，相信梦想对你而言，小菜一碟，
						</p>
						<a href="#" class="btn btn-success btn-lg threepagecontentbtn">
							快速注册，要干活了
						</a>
					</div>
				</div>
			</div>
		</div>
		
		<!--
			下面的轮播图，调试了很久，照着以前改，也没整对
			最后发现轮播图的主体内容和左右按钮跑出去了，ε=(´ο｀*)))唉
		-->
		<!--第四屏-->
		<div class="fourpage" id="fourpage">
			<div class="container" style="width: 70%;">
				<div class="courexingqing-text">
					<h1>要干活，必须工具到位</h1>
					<p>怎么才能做到最快速的学习呢，现在就开始学</p>
				</div>
				<!--下面的轮播图-->
				<div id="carousel-example-generic" class="carousel slide" data-interval="5000"
					style="height: 300px;">
					<!--小点-->            <!--标志-->
					<ol class="carousel-indicators">
						<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
						<li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
						<li data-target="#carousel-example-generic" data-slide-to="2" class="active"></li>
					</ol>
					
					<!--；轮播图具体内容-->
					<div class="carousel-inner">
						<div class="item active" style="width: 500px;">
							<img src="img/bg/datu7.jpg" />
							<!--轮播图的说明性文字-->
							<div class="carousel-caption">
								<h3>德玛西亚1</h3>
								<p>欢迎你！</p>
							</div>
						</div>
						<div class="item " style="width: 500px;">
							<img src="img/bg/datu8.jpg" />
							<!--轮播图的说明性文字-->
							<div class="carousel-caption">
								<h3>德玛西亚2</h3>
								<p>欢迎你！</p>
							</div>
						</div>
						<div class="item " style="width: 500px;">
							<img src="img/bg/datu9.jpg" />
							<!--轮播图的说明性文字-->
							<div class="carousel-caption">
								<h3>德玛西亚3</h3>
								<p>欢迎你！</p>
							</div>
						</div>
					</div>
					<!--轮播图的向左向右按钮-->
					<a class="left carousel-control" href="#carousel-example-generic"
						data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left"></span>
					</a>
					
					<a class="right carousel-control" href="#carousel-example-generic"
						data-slide="next">
						<span class="glyphicon glyphicon-chevron-right"></span>
					</a>
					</div>
				
			</div>
		</div>
		
		<!--第五屏-->
		<div class="fivepage" id="fivepage">
			<!--第五屏的背景图-->
			<div class="fivepage-bg" id="fivepage">
				<!--容器-->
				<div class="container">
					<!--底部的文字-->
					<div class="footertext">
						<h1>你还在等待呢。赶快动手吧</h1>
					</div>
					<!--底部的按钮中心,就是那三张图-->
					<div class="footerbtncenter">
						<div class="row">
							<a href="#">
								<div class="col-md-4">
									<img src="img/touxiang/touxiang1.jpg" class="footerbtn queyeicon" />
								</div>
							</a>
							<a href="#">
								<div class="col-md-4">
									<img src="img/touxiang/touxiang2.jpg" class="footerbtn queyeicon" />
								</div>
							</a>
							<a href="#">
								<div class="col-md-4">
									<img src="img/touxiang/touxiang3.jpg" class="footerbtn queyeicon" />
								</div>
							</a>
						</div>
					</div>
					<!--第五屏的按钮-->
					<div class="footertextbtn">
						<button type="button" class="btn btn-success btn-lg" style="font-size: 25px;">
							德玛西亚，德玛西亚，德玛西亚
						</button>
						<p	class="footertextbtn-text">
							只要你坚持不懈，相信梦想对你而言，小菜一碟，你一定是可以顺利拿下的。<br />
										只要你坚持不懈，相信梦想对你而言，小菜一碟，
						</p>
					</div>
				</div>
			</div>
		</div>
		<script>
			$(".carousel").carousel({
				interval:2000//第四屏的轮播图两秒换张图
			})
		</script>
	</body>
</html>
